<template>
  <div class="compliance-management">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>合规管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="数据合规" name="dataCompliance">
            <div class="compliance-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>数据合规检查</span>
                  </div>
                </template>
                <el-table :data="complianceData" style="width: 100%">
                  <el-table-column prop="item" label="检查项" width="200" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === '合规' ? 'success' : 'danger'">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="说明" />
                  <el-table-column prop="lastCheck" label="最后检查时间" width="180" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="handleCheck(scope.row)">检查</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="审计日志" name="auditLog">
            <div class="audit-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>合规审计日志</span>
                  </div>
                </template>
                <el-table :data="auditLogs" style="width: 100%">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="user" label="操作用户" width="120" />
                  <el-table-column prop="action" label="操作" width="150" />
                  <el-table-column prop="resource" label="资源" />
                  <el-table-column prop="result" label="结果" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'">
                        {{ scope.row.result }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="安全策略" name="securityPolicy">
            <div class="policy-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>安全策略配置</span>
                  </div>
                </template>
                <el-form :model="policyForm" label-width="120px">
                  <el-form-item label="数据加密">
                    <el-switch v-model="policyForm.dataEncryption" />
                  </el-form-item>
                  <el-form-item label="访问控制">
                    <el-switch v-model="policyForm.accessControl" />
                  </el-form-item>
                  <el-form-item label="审计日志">
                    <el-switch v-model="policyForm.auditLog" />
                  </el-form-item>
                  <el-form-item label="密码策略">
                    <el-select v-model="policyForm.passwordPolicy" placeholder="请选择密码策略">
                      <el-option label="简单" value="simple" />
                      <el-option label="中等" value="medium" />
                      <el-option label="复杂" value="complex" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="savePolicy">保存策略</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="应急预案" name="emergencyPlan">
            <div class="emergency-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>应急响应计划</span>
                  </div>
                </template>
                <el-table :data="emergencyPlans" style="width: 100%">
                  <el-table-column prop="name" label="预案名称" width="200" />
                  <el-table-column prop="type" label="类型" width="120" />
                  <el-table-column prop="level" label="级别" width="100">
                    <template #default="scope">
                      <el-tag :type="getLevelType(scope.row.level)">
                        {{ scope.row.level }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="描述" />
                  <el-table-column prop="lastUpdate" label="最后更新" width="180" />
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('dataCompliance')

// 合规数据
const complianceData = ref([
  {
    item: '数据存储合规',
    status: '合规',
    description: '数据存储符合相关法规要求',
    lastCheck: '2023-06-15 14:30:22'
  },
  {
    item: '数据传输加密',
    status: '不合规',
    description: '部分数据传输未启用加密',
    lastCheck: '2023-06-15 14:30:22'
  },
  {
    item: '访问权限控制',
    status: '合规',
    description: '访问权限设置符合安全要求',
    lastCheck: '2023-06-15 14:30:22'
  }
])

// 审计日志数据
const auditLogs = ref([
  {
    time: '2023-06-15 14:30:22',
    user: 'admin',
    action: '修改安全策略',
    resource: '安全策略配置',
    result: '成功'
  },
  {
    time: '2023-06-15 13:45:11',
    user: 'auditor',
    action: '查看审计日志',
    resource: '合规审计日志',
    result: '成功'
  }
])

// 安全策略表单
const policyForm = reactive({
  dataEncryption: true,
  accessControl: true,
  auditLog: true,
  passwordPolicy: 'complex'
})

// 应急预案数据
const emergencyPlans = ref([
  {
    name: '数据泄露应急预案',
    type: '数据安全',
    level: '高',
    description: '针对数据泄露事件的应急响应流程',
    lastUpdate: '2023-06-10 09:15:33'
  },
  {
    name: '系统故障应急预案',
    type: '系统运维',
    level: '中',
    description: '针对系统故障的应急响应流程',
    lastUpdate: '2023-06-05 16:42:18'
  }
])

// 方法
const handleCheck = (row: any) => {
  ElMessage.info(`正在检查 ${row.item}`)
  // 模拟检查过程
  setTimeout(() => {
    row.status = '合规'
    ElMessage.success(`${row.item} 检查完成，状态更新为合规`)
  }, 1000)
}

const savePolicy = () => {
  ElMessage.success('安全策略保存成功')
}

const handleEdit = (row: any) => {
  ElMessage.info(`编辑预案: ${row.name}`)
}

const handleDelete = (row: any) => {
  ElMessage.info(`删除预案: ${row.name}`)
}

const getLevelType = (level: string) => {
  switch (level) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}
</script>

<style scoped>
.compliance-management {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.compliance-section,
.audit-section,
.policy-section,
.emergency-section {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>